<template>
  <el-card>
    <el-form :model="advert" label-width="100px" ref="form">
      <el-form-item label="广告名称" prop="name" required>
        <el-input v-model="advert.name"></el-input>
      </el-form-item>
      <el-form-item label="广告位置" required>
        <el-select v-model="advert.spaceId" placeholder="请选择广告位置" prop="spaceId">
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in spaceList"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime" required>
        <el-date-picker
          v-model="advert.startTime"
          type="date"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="到期时间" prop="endTime" required>
        <el-date-picker
          v-model="advert.endTime"
          type="date"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="广告图片" prop="img" required>
        <upload-image v-model="advert.img" :limit="5" />
      </el-form-item>
      <el-form-item label="上线/下线" prop="status" required>
        <el-radio v-model="advert.status" label="0">下线</el-radio>
        <el-radio v-model="advert.status" label="1">上线</el-radio>
      </el-form-item>
      <el-form-item label="广告链接" prop="link" required>
        <el-input v-model="advert.link"></el-input>
      </el-form-item>
      <el-form-item label="广告备注" prop="text" required>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="advert.text"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button v-if="!isEdit" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
import Vue from 'vue'
import { Form } from 'element-ui'
import { saveOrUpdate, getAdById } from '@/services/advert'
import { getAllSpaces } from '@/services/advert-space'
import UploadImage from '@/components/UploadImage/index.vue'
import moment from 'moment'

export default Vue.extend({
  name: 'CreateOrUpdateAdvert',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    advertId: {
      type: [String, Number]
    }
  },
  components: {
    UploadImage
  },
  data () {
    return {
      advert: {
        name: '',
        text: '',
        img: '',
        spaceId: undefined,
        link: '',
        startTime: '',
        endTime: '',
        status: '0'
      },
      spaceList: []
    }
  },
  created () {
    if (this.isEdit) {
      this.loadAdvert()
    }
    this.loadSpaces()
  },
  methods: {
    async loadSpaces () {
      const { data } = await getAllSpaces()
      this.spaceList = data.content
    },

    async loadAdvert () {
      const { data } = await getAdById(this.advertId)
      const { content } = data
      if (content) {
        content.startTime = moment(
          content.startTime
        ).format('YYYY-MM-DD')
        content.endTime = moment(content.endTime).format(
          'YYYY-MM-DD'
        )
        content.status = content.status + ''
      }
      this.advert = content
    },

    async handleSave () {
      const { data } = await saveOrUpdate({
        ...this.advert,
        status: Number(this.advert.status),
        startTime: new Date(this.advert.startTime),
        endTime: new Date(this.advert.endTime),
        sort: 0
      })
      if (data.success) {
        this.$message.success('保存成功')
        this.$router.push('/advert')
      } else {
        this.$message.error('保存失败')
      }
    },

    resetForm () {
      (this.$refs.form as Form).resetFields()
    }
  }
})
</script>

<style lang="scss" scoped>
.el-step {
  cursor: pointer;
}
</style>
